<script setup lang="ts">
import type { FormInstance } from 'ant-design-vue';

import { computed, ref, watch } from 'vue';

import { message } from 'ant-design-vue';

interface Props {
  visible: boolean;
  customer?: any;
}

interface Emits {
  (e: 'update:visible',value: boolean): void;
  (e: 'success'): void;
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

const formRef = ref<FormInstance>();

// 表单数据
const formData = ref({
  name: '',
  phone: '',
  email: '',
  gender: '',
  age: undefined,
  address: '',
  source: '',
  deposit: 0,
  points: 0,
  notes: '',
});

// 计算属性
const isEdit = computed(() => !!props.customer);

// 表单验证规则
const rules = {
  name: [{ required: true, message: '请输入顾客姓名' }],
  phone: [
    { required: true, message: '请输入手机号' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' },
  ],
  email: [{ type: 'email', message: '请输入正确的邮箱地址' }],
  gender: [{ required: true, message: '请选择性别' }],
  age: [{ required: true, message: '请输入年龄' }],
  address: [{ required: true, message: '请输入住址' }],
};

// 方法
const resetForm = () => {
  formData.value = {
    name: '',
    phone: '',
    email: '',
    gender: '',
    age: undefined,
    address: '',
    source: '',
    deposit: 0,
    points: 0,
    notes: '',
  };
};

// 监听顾客变化
watch(
  () => props.customer,
  (customer) => {
    if (customer) {
      // 编辑模式，填充表单数据
      formData.value = {
        name: customer.name,
        phone: customer.phone,
        email: customer.email,
        gender: customer.gender,
        age: customer.age,
        address: customer.address,
        source: customer.source,
        deposit: customer.deposit,
        points: customer.points,
        notes: customer.notes || '',
      };
    } else {
      // 新增模式，重置表单
      resetForm();
    }
  },
  { immediate: true },
);

const handleOk = async () => {
  try {
    await formRef.value?.validate();

    // 这里可以调用API保存顾客数据
    message.success(isEdit.value ? '顾客信息修改成功' : '顾客创建成功');
    emit('success');
    emit('update:visible', false);
    resetForm();
  } catch (error) {
    console.error('表单验证失败:', error);
  }
};

const handleCancel = () => {
  emit('update:visible', false);
  resetForm();
};
</script>

<template>
  <a-modal
    :open="visible"
    :title="isEdit ? '修改顾客信息' : '新增顾客'"
    width="600px"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form ref="formRef" :model="formData" :rules="rules" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="姓名" name="name">
            <a-input
              v-model:value="formData.name"
              placeholder="请输入顾客姓名"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="手机号" name="phone">
            <a-input
              v-model:value="formData.phone"
              placeholder="请输入手机号"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="邮箱" name="email">
            <a-input
              v-model:value="formData.email"
              placeholder="请输入邮箱地址"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="性别" name="gender">
            <a-select v-model:value="formData.gender" placeholder="请选择性别">
              <a-select-option value="male">男</a-select-option>
              <a-select-option value="female">女</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="年龄" name="age">
            <a-input-number
              v-model:value="formData.age"
              placeholder="请输入年龄"
              :min="0"
              :max="120"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="了解途径" name="source">
            <a-select
              v-model:value="formData.source"
              placeholder="请选择了解途径"
              allow-clear
            >
              <a-select-option value="朋友推荐">朋友推荐</a-select-option>
              <a-select-option value="网络搜索">网络搜索</a-select-option>
              <a-select-option value="广告宣传">广告宣传</a-select-option>
              <a-select-option value="路过看到">路过看到</a-select-option>
              <a-select-option value="其他">其他</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label="住址" name="address">
        <a-input
          v-model:value="formData.address"
          placeholder="请输入详细住址"
        />
      </a-form-item>

      <a-row :gutter="16">
        <a-col :span="12">
          <a-form-item label="押金" name="deposit">
            <a-input-number
              v-model:value="formData.deposit"
              placeholder="请输入押金金额"
              :min="0"
              :precision="2"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item label="积分" name="points">
            <a-input-number
              v-model:value="formData.points"
              placeholder="请输入积分"
              :min="0"
              :precision="2"
              style="width: 100%"
            />
          </a-form-item>
        </a-col>
      </a-row>

      <a-form-item label="备注" name="notes">
        <a-textarea
          v-model:value="formData.notes"
          :rows="3"
          placeholder="请输入备注信息"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<style scoped>
:deep(.ant-form-item) {
  margin-bottom: 16px;
}
</style>
